import React, { useState, useEffect } from 'react';
import { PracticesTab } from './tabs/PracticesTab';
import { ContentTab } from './tabs/ContentTab';
import { RemindersTab } from './tabs/RemindersTab';
import { NewsTab } from './tabs/NewsTab';
import { SettingsTab } from './tabs/SettingsTab';
import { HistoryTab } from './tabs/HistoryTab';
import { Navigation } from '../components/Navigation';
import '../styles/theme.css';
import '../styles/animations.css';
import './App.css';

function App() {
  const [currentTab, setCurrentTab] = useState('practices');
  const [settings, setSettings] = useState(null);

  useEffect(() => {
    chrome.storage.local.get(['settings'], (result) => {
      const userSettings = result.settings || {
        theme: 'dark',
        notificationsEnabled: true,
        badgeEnabled: true,
        notificationSound: 'beep'
      };
      setSettings(userSettings);
      document.body.setAttribute('data-theme', userSettings.theme || 'dark');
    });
  }, []);

  const handleTabChange = (tab) => {
    setCurrentTab(tab);
  };

  if (!settings) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <div className="popup-app">
      <div className="popup-content">
        {currentTab === 'practices' && <PracticesTab />}
        {currentTab === 'content' && <ContentTab />}
        {currentTab === 'reminders' && <RemindersTab />}
        {currentTab === 'news' && <NewsTab />}
        {currentTab === 'settings' && <SettingsTab settings={settings} setSettings={setSettings} />}
        {currentTab === 'history' && <HistoryTab />}
      </div>
      <Navigation currentTab={currentTab} onTabChange={handleTabChange} />
    </div>
  );
}

export default App;

